<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>岛民记录</el-breadcrumb-item>
      <el-breadcrumb-item>登岛数据</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card shadow="never">
      <div>
        当前以注册岛民：{{userTotal}}
      </div>
      <div class="stat-container">
        <div class="comments">
          <p>最近7日评论</p>
          <el-table :data="comments" border heigth="500">
            <el-table-column type="index" width="50" label="#">
            </el-table-column>
            <el-table-column label="用户名" width="100" prop="user"></el-table-column>
            <el-table-column label="日期" width="120" prop="create_time" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="标题" width="100" prop="blog_name" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="内容" prop="content"></el-table-column>
          </el-table>
        </div>
        <div class="stat">
          <div class="stat-head">
            <span>用户访问记录</span>
            <el-button type="danger" @click="handleStatDelete()">删除</el-button>
          </div>
          <el-table :data="stats" border width="50%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label="#">
            </el-table-column>
            <el-table-column label="用户名" width="100" prop="user_name"></el-table-column>
            <el-table-column label="日期" width="180" prop="create_time"></el-table-column>
            <el-table-column label="博客" prop="blog_title"></el-table-column>
            <el-table-column type="selection" width="55"></el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total='statsTotal' :page-size="queryInfo.perpage" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getCountApi, getStatsApi, deleteStatsApi } from '../../request/apis'
export default {
  data () {
    return {
      queryInfo: {
        pagenum: 1,
        perpage: 8
      },
      comments: [],
      userTotal: 0,
      stats: [],
      statsTotal: 0,
      selectList: ''
    }
  },
  created () {
    this.getCount()
    this.getStats()
  },
  methods: {
    async getCount () {
      const { data, meta } = await getCountApi()
      if (meta.status === 200) {
        this.comments = data.comments
        this.userTotal = data.user_count
      } else {
        this.$message.error('获取评论列表失败')
      }
    },
    async getStats () {
      const { data, meta } = await getStatsApi({ params: this.queryInfo })
      if (meta.status === 200) {
        this.stats = data.stats
        this.statsTotal = data.total
      } else {
        this.$message.error('获取访问列表失败')
      }
    },
    handleCurrentChange (newpage) {
      this.queryInfo.pagenum = newpage
      this.getStats()
    },
    handleSelectionChange (val) {
      const selectList = []
      val.forEach(item => {
        selectList.push(item.id)
      })
      this.selectList = selectList.join(',')
    },
    // 删除记录
    async handleStatDelete () {
      const { data, meta } = await deleteStatsApi({ params: { ids: this.selectList } })
      if (meta.status === 200) {
        this.$message.success('删除成功')
        if ((data.total % this.queryInfo.perpage) === 0) {
          this.queryInfo.pagenum > 1 ? this.queryInfo.pagenum -= 1 : this.queryInfo.pagenum = 1
        }
        this.getStats()
      }
    }
  }
}
</script>

<style>
.comments {
  width: 50%;
  margin-right: 20px;
}
.stat {
  flex: 1;
}
.stat-container {
  display: flex;
  margin-top: 30px;
}
.stat-head {
  /* display: flex;
  justify-content: space-around; */
  position: relative;
}
.stat-head .el-button {
  position: absolute;
  right: 0;
  top: -20px;
}
</style>
